<script setup lang="ts">
import { computed, onMounted, ref, getCurrentInstance } from "vue";
import portService from "@/apis";
import type Typings from "@/typings";

const curIns = getCurrentInstance()?.proxy;

type TableColumn = {
  dataType: "job" | "develop" | "life";
  name: string;
  finish: Typings.Job.job[] | Typings.Develop.develop[] | Typings.Life.life[];
  todo: Typings.Job.job[] | Typings.Develop.develop[] | Typings.Life.life[];
};

const visible = ref<boolean>(false);
const open = () => {
  visible.value = true;
};
const close = () => {
  visible.value = false;
};

const dataTypeNameMap = {
  job: "工作",
  development: "开发",
  life: "生活",
};

const columns = computed<Typings.XtPublic.Table.column<TableColumn>[]>(() => {
  return [
    {
      prop: "name",
      label: "数据类别",
      clickFn: (scope) => {
        close();
        curIns?.$router.push({
          path: `/${scope.row.dataType}`,
        });
      },
    },

    {
      prop: "finish",
      label: "已完成",
      renderFn: (scope) => {
        return scope.row.finish.length + "";
      },
    },

    {
      prop: "todo",
      label: "待办",
      renderFn: (scope) => {
        return scope.row.todo.length + "";
      },
    },
  ];
});

const tableData = ref<TableColumn[]>([]);

const getTodoInfo = async () => {
  const { data } = await portService.todoInfo();

  // job
  const jobFinish = data.job.filter((row: Typings.Job.job) => row.isFinish);
  const jobTodo = data.job.filter((row: Typings.Job.job) => !row.isFinish);
  tableData.value.push({
    dataType: "job",
    name: dataTypeNameMap.job,
    finish: jobFinish,
    todo: jobTodo,
  });

  // development
  const developmentFinish = data.development.filter(
    (row: Typings.Develop.develop) => row.isFinish
  );
  const developmentTodo = data.development.filter(
    (row: Typings.Develop.develop) => !row.isFinish
  );
  tableData.value.push({
    dataType: "develop",
    name: dataTypeNameMap.development,
    finish: developmentFinish,
    todo: developmentTodo,
  });

  // life
  const lifeFinish = data.life.filter((row: Typings.Life.life) => row.isFinish);
  const lifeTodo = data.life.filter((row: Typings.Life.life) => !row.isFinish);
  tableData.value.push({
    dataType: "life",
    name: dataTypeNameMap.life,
    finish: lifeFinish,
    todo: lifeTodo,
  });
};

onMounted(async () => {
  if (window.sessionStorage.getItem("SHOW_TODO_INFO") === "1") {
    window.sessionStorage.removeItem("SHOW_TODO_INFO");
    open();
    await getTodoInfo();
  }
});

defineExpose({
  open,
});
</script>

<template>
  <xt-dialog title="待办信息" v-model="visible" :before-close="close">
    <ul class="py-[10px]">
      <li>1、每周任务填写※※※</li>
      <li>2、每周周计划填写※※※</li>
    </ul>
    <xt-table :data="tableData" :columns="columns"></xt-table>
  </xt-dialog>
</template>
